<template>
  <dt-modal-info ref="info" title="帮助" :width="700">
    <div class="info" v-for="(item, index) in info" :key="index">
      <h4 v-if="item.label">{{ item.label }}:</h4>
      <div v-if="item.value" class="items">
        <p v-for="(value, idx) in item.value" :key="idx">
          {{ value }}
        </p>
      </div>
      <h4 v-if="item.tips">{{ item.tips }}</h4>
    </div>
  </dt-modal-info>
</template>

<script>
  export default {
    data() {
      return {
        info: null
      }
    },
    mounted() {
    },
    methods: {
      show(info) {
        this.info = info
        this.$refs.info.show()
      },
      hide() {
        this.$refs.info.hide()
      },
    }
  }
</script>

<style lang="scss" scoped>
  .info {
    margin-bottom: 30px;
  }
  
  .items {
    margin-top: 5px;
    p {
      text-indent: 20px;
    }
  }
</style>
